/**
 * 装车明细 - 弹窗
 * @author xiaoxujs
 */

import { ConfigProvider, message, Modal, Select, Table, TableProps } from "antd";
import { FC, useCallback, useEffect, useState } from "react";
import { useWindowFontSize } from "../../../../../assets/fun/Antd/configprovider";
import { IPlanCarShipDetail, IPlanLoadDetail } from "../../../../../type/planManagement";
import { handleGetDictionaryItem, handleGetDictionaryItemData } from "../../../../../assets/fun/DictionaryItem";
import { dictionaryStyle } from "../../../../../assets/style/DictionaryItem";
import { ModuleSearchBox } from "../../style";
import { ISelectList } from "../../../../../type/antd";
import { postPlanLoadDetail } from "../../../api";
import { INoFenye } from "../../../../../type/commit";

const LoadingDetails: FC<{
    open: boolean;
    clickData?: IPlanCarShipDetail;
    handleCallback: () => void;
}> = ({
    open,
    clickData,
    handleCallback
}) => {
        const [listData, setListData] = useState<IPlanLoadDetail[]>([]); // 列表数据
        const [tableLoading, setTableLoading] = useState(false); //tableLoading
        const [huoyunzhuangtaiList, setHuoyunzhuangtaiList] = useState<ISelectList[]>([]); // 货运状态字典项
        const [huoyunzhuangtaiValue, sethuoyunzhuangtaiValue] = useState<string>()

        const listFun = useCallback(
            async () => {
                if (clickData) {
                    setTableLoading(true);
                    const params = {
                        carColour: clickData.carColour,
                        carNo: clickData.carNo,
                        task: huoyunzhuangtaiValue
                    }
                    const { code, msg, data } = await postPlanLoadDetail(params) as INoFenye<IPlanLoadDetail>;
                    if (code === 20000) {
                        setListData(data);
                    } else {
                        message.error(msg);
                    }
                    setTableLoading(false);
                }

            },
            [clickData, huoyunzhuangtaiValue],
        )
        useEffect(() => {
            listFun();
        }, [listFun])



        useEffect(() => {
            let carArr = handleGetDictionaryItem('YSZT');
            let carArr1: ISelectList[] = []
            carArr.forEach(element => {
                carArr1.push({
                    value: element.value,
                    label: element.label
                })
            });
            setHuoyunzhuangtaiList(carArr1);

            return () => {

            }
        }, [])


        const handleCancel = () => {
            console.log('取消')
            sethuoyunzhuangtaiValue(undefined);
            handleCallback()
        }
        const handleSelectChange = (value: string) => {
            sethuoyunzhuangtaiValue(value);
        }

        const columns: TableProps<IPlanLoadDetail>['columns'] = [
            {
                title: '序号',
                align: 'center',
                render: (_, record, index) => (
                    <span>{index + 1}</span>
                ),
            },
            {
                title: '计划编号',
                dataIndex: 'planNo',
                align: 'center',
            },
            {
                title: '物流单位',
                dataIndex: 'transportName',
                align: 'center',
            },
            {
                title: '派车单号',
                dataIndex: 'ambulanceNo',
                align: 'center',
            },
            {
                title: '车牌号',
                dataIndex: 'carNo',
                align: 'center',
            },
            {
                title: '司机姓名',
                dataIndex: 'driverName',
                align: 'center',
            },
            {
                title: '司机电话',
                dataIndex: 'driverPhoneNumber',
                align: 'center',
            },
            {
                title: '预装量(吨)',
                dataIndex: 'expectAmount',
                align: 'center',
            },
            {
                title: '实装量(吨)',
                dataIndex: 'actualAmount',
                align: 'center',
            },
            {
                title: '生成时间',
                dataIndex: 'submitTime',
                align: 'center',
            },
            {
                title: '装运状态',
                dataIndex: 'task',
                align: 'center',
                render: text => {
                    const obj = handleGetDictionaryItemData('YSZT', text);
                    if (obj === '无') {
                        return <span>--</span>
                    } else {
                        return <div style={dictionaryStyle[obj.listClass]}>
                            {obj.cssClass ? <span className='iconfont' style={{ marginRight: '0.5rem' }} dangerouslySetInnerHTML={{ __html: obj.cssClass }}></span> : null}
                            {obj.label}
                        </div>
                    }

                }
            },
        ];
        return <Modal title="装车明细" width={useWindowFontSize(1496)} open={open} onCancel={handleCancel} footer={(_, { CancelBtn }) => <CancelBtn />}>
            <ModuleSearchBox>
                <div className="huoyunzhuangtai">
                    装运状态
                </div>
                <Select
                    value={huoyunzhuangtaiValue}
                    allowClear
                    style={{ width: 120 }}
                    onChange={handleSelectChange}
                    options={huoyunzhuangtaiList}
                />
            </ModuleSearchBox>
            <ConfigProvider theme={{
                components: {
                    Table: {
                        headerColor: '#8B9BAC',
                        cellFontSize: useWindowFontSize(14),
                        cellPaddingBlock: 7
                    }
                }
            }}>
                <Table<IPlanLoadDetail>
                    pagination={false}
                    rowKey='id'
                    columns={columns}
                    dataSource={listData}
                    loading={tableLoading}
                    style={{ border: '0.1rem solid #F3F3F3' }}
                // bordered
                />
            </ConfigProvider>
        </Modal>
    }

export default LoadingDetails;